/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Input, InputDatalist, InputLine, LineColumn, Select, SuffixInput, Table, TableBody, TableRow, Text, TextArea,
} from "customize-easy-ui-component";
import {DirectLink} from "../../../routing/Link";
import Img_Seal from "../../../images/seal.png";
import {CCellUnit, InspectRecordLayout, InternalItemProps, useItemInputControl} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";

export const 工作介质选=['压缩空气', ];
const  default问处理=['1、未见异常。',  '无。'
     ];

export const itemA下结论=['问题及处', '检验结论','结论压力','结论温度','结论介质','结论人舱','检验日期','检验日期1','新下检日','结论说明'];
/**通用见证材料3项的： 约定：children [] 可以嵌入俩个儿子DOM节点，分别代表两个段落插入一个div块;
 * */
export const ConclusionOxygen=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,refWidth}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA下结论,);
      const {inp, setInp} = useItemInputControl({ ref });
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">问题与处理：</Text>
        本次检验所发现缺陷的性质、位置、程度(必要时附图)和处理意见以及有关变化情况：
        <BlobInputList value={inp?.问题及处 || ''} rows={8} datalist={default问处理}
                             onListChange={v => setInp({...inp, 问题及处: v || undefined}) } />
        <hr/>
        <Text variant="h5">检验结论-检查结论{'>>'}</Text>
        <InputLine  label='检验结论' >
          <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                  value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
            <option></option>
            <option>符合要求</option>
            <option>基本符合要求</option>
            <option>不符合要求</option>
          </Select>
        </InputLine>
        允许使用参数：
        <LineColumn column={4}>
          <InputLine  label='压力' >
            <SuffixInput  value={inp?.结论压力 ||''}
                          onChange={e=>setInp({ ...inp, 结论压力: e.currentTarget.value||undefined})}>MPa</SuffixInput>
          </InputLine>
          <InputLine  label='温度' >
            <SuffixInput  value={inp?.结论温度 ||''}
                          onChange={e=>setInp({ ...inp, 结论温度: e.currentTarget.value||undefined})}>℃</SuffixInput>
          </InputLine>
          <InputLine  label='压力介质'>
            <InputDatalist value={inp?.结论介质 ||''}  datalist={工作介质选}
                           onListChange={v => setInp({ ...inp, 结论介质: v||undefined})} />
          </InputLine>
          <InputLine  label='人均舱容' >
            <SuffixInput  value={inp?.结论人舱 ||''}
                          onChange={e=>setInp({ ...inp, 结论人舱: e.currentTarget.value||undefined})}>m³</SuffixInput>
          </InputLine>
          <InputLine label='设置检验日期'>
            <Input value={inp?.检验日期 || ''} type='date'
                   onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
          </InputLine>
          <InputLine  label='下次定期检验日期' >
            <Input  value={inp?.新下检日 ||''}  type='date'
                    onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
          </InputLine>
        </LineColumn>
        说明: （包含变更情况）
        <TextArea  value={inp?.结论说明 ||''} rows={5}
                   onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
      </InspectRecordLayout>;
});

export const 结论报告盖章= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  return <><Table  fixed={  ["8.6%","26%","22%","19%","%"]  } css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
    <TableBody>
      <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion#Conclusion`}>
        <TableRow  css={{"@media print": {pageBreakInside: 'avoid',}}}>
          <CCell  scope="row" rowSpan={3}>检验结论</CCell>
          <CCell rowSpan={2}><Text variant="h4">{orc.检验结论}</Text></CCell>
          <CCell colSpan={3}>允许（监控）工作参数</CCell>
        </TableRow>
        <TableRow>
          <CCell colSpan={3} css={{padding:0}}>
            <Table  fixed={ ["30%","%"]  } css={ {borderCollapse: 'collapse', height:'fill-available'} } tight  miniw={800}>
              <TableBody>
                <TableRow >
                  <CCell>压力</CCell>
                  <CCellUnit unit={'MPa'} >{orc.结论压力 || '／'}</CCellUnit>
                </TableRow>
                <TableRow >
                  <CCell>温度</CCell>
                  <CCellUnit unit={'℃'} >{orc.结论温度 || '／'}</CCellUnit>
                </TableRow>
                <TableRow >
                  <CCell>压力介质</CCell>
                  <CCell >{orc.结论介质}</CCell>
                </TableRow>
                <TableRow >
                  <CCell>人均舱容</CCell>
                  <CCellUnit unit={'m³'} >{orc.结论人舱 || '／'}</CCellUnit>
                </TableRow>
              </TableBody>
            </Table>
          </CCell>
        </TableRow>
        <TableRow>
          <CCell colSpan={4}>下次定期检验日期：&nbsp;&nbsp; {orc.新下检日} &nbsp;前</CCell>
        </TableRow>
        <TableRow>
          <CCell >说明</CCell>
          <Cell split={true} colSpan={4}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
            {orc.结论说明 || '／'}
          </div></Cell>
        </TableRow>
      </DirectLink>
    </TableBody>
  </Table>
    <Table fixed={ ["8.6%","45%","4.2%","12%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
      <TableBody>
        <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
          <TableRow>
            <CCell>检验人员</CCell>
            <CCell colSpan={4}>{orc.检验人IDs}</CCell>
          </TableRow>
          <TableRow>
            <CCell>编制</CCell>
            <CCell>{orc.检验人IDs}</CCell>
            <CCell>日期</CCell>
            <CCell>{orc.检验日期 || '／'}</CCell>
            <CCell rowSpan={3}>
              <div css={{
                height:'6.5rem',
                '::before': {
                  filter: 'opacity(30%)',
                  width: '100%',
                  height: '100%',
                  backgroundImage: `url(${Img_Seal})`,
                  content: '" "',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                }
              }}>
                <Table  fixed={ ["40%","%"]  } css={ {borderCollapse: 'collapse',height:'fill-available'} } tight  miniw={800}>
                  <TableBody>
                    <TableRow>
                      <CCell css={{border:'none'}}>机构核准证号：</CCell>
                      <CCell css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                    </TableRow>
                    <TableRow>
                      <CCell css={{border:'none'}} colSpan={2}>（检验机构公章或者检验专用章）</CCell>
                    </TableRow>
                    <TableRow>
                      <CCell css={{border:'none'}}>日期：</CCell>
                      <Cell css={{border:'none'}}>2024/03/04</Cell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>
            </CCell>
          </TableRow>
        </DirectLink>
        <TableRow>
          <CCell>审核</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
        <TableRow >
          <CCell>批准</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
      </TableBody>
    </Table>
    </>;
};
